<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="index.css" />
		<link rel="stylesheet" href="font_2734701_x0aopc8y6gr/iconfont.css">
		<script src="font_2734701_x0aopc8y6gr/iconfont.js"></script>
		<style type="text/css">
			.icon {
				width: 1em;
				height: 1em;
				vertical-align: -0.15em;
				fill: currentColor;
				overflow: hidden;
			}

			#main-lunbo {
				position: relative;
			}

			#btn-next {
				width: 40px;
				height: 100px;
				/* border: 1px solid blue; */
				margin-left: 1241px;
				position: absolute;
				font-size: 50px;
				top: 215px;
				color: lightgray;
				background-color:gray;
				/* display: none; */
			}

			#btn-previous {
				margin-top: 215px;
				margin-left: 0px;
				width: 40px;
				height: 100px;
				background-size: 20px 20px;
				/* border: 1px solid blue; */
				font-size: 50px;
				color: lightgray;
				background-color:gray;
				/* display: none; */
			}

			#main-lunbo ul {
				position: absolute;
				bottom: 36px;

				height: 19px;
				/* border: 1px solid red; */
				display: flex;
				margin: auto;
				padding-top: 5px;
				box-sizing: border-box;
				left: 457px;

			}

			#main-lunbo ul li {
				width: 58px;
				height: 1px;
				font-weight: 900;
				background-color: darkgray;
				/* border: 1px solid green; */
				margin-left: 8px;
				margin-right: 8px;
			}
		</style>
	</head>
	<body>
		<header>
			<div id="header">
				<div id="header-main">
					<div id="header-left">
						<img src="./img/home_logo.png">
						<ul class="nav1">
							<li><a href="" class="line">明星产品</a><p></p></li>
							<li><a href="" class="line">臻选礼盒</a><p></p></li>
							<li>
								<a href="" class="line">护肤</a>
								<p></p>
								<!-- 二级菜单 -->

								<ul class="nav2">
										<li class="li2"><a href="">卸妆</a></li>
										<li class="li2"><a href="">洁面 </a></li>
										<li class="li2"><a href="">乳液</a></li>
										<li class="li2"><a href=""> 化妆水</a></li>
										<li class="li2"><a href="">美容液</a></li>
										<li class="li2"><a href="">面霜</a></li>
										<li class="li2"><a href=""> 面膜</a></li>
										<li class="li2"><a href="">按摩 </a></li>
										<li class="li2"><a href="">防护</a></li>
								</ul>
							</li>     
							<li>
								<a href="" class="line">彩妆</a>
								<p></p>
								<ul class="nav3">
										<li class="li2"><a href="">腮红 </a></li>
										<li class="li2"><a href="">眼影</a></li>
										<li class="li2"><a href="">眉笔</a></li>
										<li class="li2"><a href=""> 眼线</a></li>
										<li class="li2"><a href="">睫毛膏 </a></li>
										<li class="li2"><a href="">唇膏</a></li>
										<li class="li2"><a href="">粉饼</a></li>
										<li class="li2"><a href="">粉底液</a></li>
										<li class="li2"><a href="">粉底霜</a></li>
										<li class="li2"><a href="">基底乳</a></li>
										<li class="li2"><a href="">蜜粉</a></li>
										<li class="li2"><a href="">修颜膏</a></li>
								</ul>
							</li>
							<li>
								
								<a href="" class="line">美妆工具</a>
								<p></p>
								<ul class="nav4">
									<li class="li2"><a href="">护肤工具 </a></li>
									<li class="li2"><a href=""> 底妆工具</a></li>
									<li class="li2"><a href="">彩妆工具</a></li>
								</ul>
								
							</li>
							<li>
								<a href="" class="line">产品系列</a>
								<p><br></p>
								<ul class="nav5">
										<li class="li3"><a href=""><img src="img/5.png" ></a></li>
										<li class="li3"><a href=""><img src="img/6.png" ></a></li>
										<li class="li3"><a href=""><img src="img/7.png" ></a></li>
										<li class="li3"><a href=""><img src="img/8.jpg" ></a></li>
										<li class="li3"><a href=""><img src="img/9.png" ></a></li>
										<li class="li3"><a href=""><img src="img/10.png" ></a></li>
										<li class="li3"><a href=""><img src="img/11.png" ></a></li>
										<li class="li3"><a href=""><img src="img/12.png" ></a></li>
										<li class="li3"><a href=""><img src="img/13.jpg" ></a></li>
										<li class="li3"><a href=""><img src="img/14.png" ></a></li>
										<li class="li3"><a href=""><img src="img/15.png" ></a></li>
										<li class="li3"><a href=""><img src="img/16.png" ></a></li>
										<li class="li3"><a href=""><img src="img/17.png" ></a></li>
										<li class="li3"><a href=""><img src="img/18.png" ></a></li>
										<li class="li3"><a href=""><img src="img/19.png" ></a></li>
										<li class="li3"><a href=""><img src="img/20.png" ></a></li>
										<li class="li3"><a href=""><img src="img/21.png" ></a></li>
								</ul>
								
							</li>
						</ul>
					</div>
					<div id="header-right">
						<ul>
							<li><a href=""><span class="iconfont icon-wode"></span></a><b>|</b><span class="shop-a">登陆</span></li>
							<li><a href=""><span class="iconfont icon-shangpin-gouwudai"></a><b>|</b><span></span></li>
							<li><a href=""><span class="iconfont icon-sousuo"></a><b>|</b><span  class="shop-b">搜索</span></li>
							<li><a href=""><span class="iconfont icon-erji"></a><span  class="shop-m">客服</span></li>
						</ul>
					</div>
				</div>
			</div>
		</header>
		<div id="main-lunbo">
			<input id="btn-previous" type="button" value="<" />
			<input id="btn-next" type="button" value=">" />

			<ul>
				<li class="banner-item"></li>
				<li class="banner-item"></li>
				<li class="banner-item"></li>
				<li class="banner-item"></li>
			</ul>

		</div>
		<div id="main-photo">
			<div id="main-photo-">
				<img src="img/55279363.jpg">
				<img src="img/58107754.jpg">
				<img src="img/02091648.jpg">
				<img src="img/02514538.jpg">
			</div>
		</div>
		<div id="main-max">
			<div id="main-test">
				<h1>臻品严选成就完美</h1>
				<span class="line"></span>
			</div>
			<div id="main-list">
				<div id="main-list-left">
					<h3>黛珂保湿美容液（光耀未来版）</h3>
					<p>黛珂保湿美容液（光耀未来版）</p>
					<span><a href="">¥ 1,050</a></span><br>
					<a href=""><button type="button">立即购买</button></a>

				</div>
				<div id="main-list-right">
					<a href=""><img src="img/44418245.jpg"></a>
				</div>
			</div>
			<div id="main-list-one">
				<div id="main-list-left-one">
					<a href=""><img src="img/24283464.jpg"></a>

				</div>
				<div id="main-list-right-one">
					<h3>【黛珂七夕】黛珂牛油果紫苏水套组</h3>
					<p>牛油果紫苏水套组</p><br>
					<span><a href="">¥ 600</a></span><br>

					<a href=""><button type="button">立即购买</button></a>
				</div>
			</div>
			<div id="main-list-two">
				<div id="main-list-left-two">
					<h3>【黛珂七夕】黛珂AQ舒活套组</h3>
					<p>黛珂AQ舒活修护套组</p>
					<span><a href="">¥ 1,380</a></span><br>
					<p class="word">滋润型 - 普通型</p>
					<a href=""><button type="button">立即购买</button></a>
				</div>
				<div id="main-list-right-two">
					<a href=""><img src="img/25047713.jpg"></a>
				</div>
			</div>
			<div id="main-list-three">
				<div id="main-list-left-three">
					<a href=""><img src="img/13020896.jpg"></a>

				</div>
				<div id="main-list-right-three">
					<h3>【黛珂七夕】黛珂心悦容光丝柔蜜粉套组</h3>
					<p>黛珂心悦容光丝柔蜜粉套组</p><br>
					<span><a href="">¥ 380</a></span><br>

					<a href=""><button type="button">立即购买</button></a>
				</div>
			</div>
			<div id="main-list-four">
				<div id="main-list-left-four">
					<h3>【黛珂七夕】黛珂多重防晒乳套组</h3>
					<p>黛珂多重防晒乳套组</p>
					<span><a href="">¥ 290</a></span><br>
					<a href=""><button type="button">立即购买</button></a>
				</div>
				<div id="main-list-right-four">
					<a href=""><img src="img/14285631.jpg"></a>

				</div>
			</div>
			<div id="main-list-five">
				<div id="main-list-left-five">
					<a href=""><img src="img/07120534.jpg"></a>

				</div>
				<div id="main-list-right-five">
					<h3>黛珂AQ舒活洗颜霜套组</h3>
					<p>黛珂AQ舒活洗颜霜套组</p><br>
					<span><a href="">¥ 350</a></span><br>

					<a href=""><button type="button">立即购买</button></a>
				</div>
			</div>
			<div id="main-list-six">
				<div id="main-list-left-six">
					<h3>【黛珂七夕】黛珂植物欣韵乳水保湿套组</h3>
					<p>黛珂植物欣韵乳水保湿套组</p>
					<span><a href="">¥ 680</a></span><br>
					<p class="word">滋润型 - 普通型</p>
					<a href=""><button type="button">立即购买</button></a>
				</div>
				<div id="main-list-right-six">
					<a href=""><img src="img/25276933.jpg"></a>

				</div>
			</div>
			<div id="main-test">
				<h1>套装美颜完美呵护</h1>
				<span class="line"></span>
			</div>
			<div id="main-test">
				<h1>臻享会员独家礼遇</h1>
				<span class="line"></span>
			</div>
			<div id="last-banner">
				<ul>
					<li>
						<img src="img/12016425.png">
						<h3>积分同步 顺丰包邮</h3>
						<p>尊享会员权益</p>
					</li>
					<li>
						<img src="img/33307509.jpg">
						<h3>2020年会员积分兑礼</h3>
						<p>感恩礼赞甄享珍颜会尊贵权益</p>
					</li>
					<li>
						<img src="img/11380454.png">
						<h3>珍颜会会员制度</h3>
						<p>挚爱加入珍颜会享礼遇</p>
					</li>
				</ul>
			</div>

		</div>

		<footer>
			<div id="foot">
				<div id="foot-head">
					<div id="foot-head-pre">
						<ul>
							<li>
								<h4>客户服务</h4>
								<p>退货规定</p>
								<p>查看我的订单</p>
								<p>常见问题</p>
							</li>
							<li>
								<h4>帮助中心</h4>
								<p>联系我们:400-920-2203</p>
								<p>投诉与建议</p>
								<p>珍颜会会员中心</p>
							</li>
							<li>
								<h4>关于黛珂</h4>
								<p>品牌故事</p>
								<p>黛珂保养概念</p>
								<p>美容中心</p>
								<p>门店查询</p>
							</li>
							<li>
								<h4>关注我们</h4>
								<p><img src="img/QR.jpg"></p>
								<p class="foot">扫描二维码</p>
								<p class="head">关注黛珂中国官方微信</p>
							</li>
						</ul>
					</div>

				</div>
			</div>
			<div id="last-tong">
				<div id="last-xin">
					© 高丝化妆品销售&nbsp;&nbsp;&nbsp;（中国）&nbsp;有限公司版权所有 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;沪ICP备09002279号-17<svg
						class="icon" aria-hidden="true">
						<use xlink:href="#icon-guohui"></use>
					</svg>公网安备 31010902002154号
					<br>
					国家药监局提示您：&nbsp;请正确认识化妆品功效，&nbsp;&nbsp;化妆品不能替代药品，&nbsp;&nbsp;不能治疗皮肤病等疾病
				</div>
			</div>
		</footer>


	</body>
</html>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	class Banner {
		constructor(oDiv, oLis, oPre, oNext) {
			this.index = 0;
			this.oDiv = oDiv;
			this.oLis = oLis;
			this.oPre = oPre;
			this.oNext = oNext;
			this.oDiv.style.backgroundImage = `url(img/${this.index}.jpg)`;
			this.oLis[this.index].style.backgroundColor = "red"
		}
		// 方法一 设置背景图跟随下表变化
		setback() {
			this.oDiv.style.backgroundImage = "url(img/" + this.index + ".jpg)"
		}

		// 方化法二设置li跟随下标的颜色变化

		setcolor() {
			for (let i = 0; i < oLis.length; i++) {
				if (this.index == i) {
					this.oLis[i].style.backgroundColor = "black"
				} else {
					this.oLis[i].style.backgroundColor = "gainsboro"
				}
			}
		}
		// 方法三点击右边按钮下标的变化
		next() {
			this.index++;
			if (this.index == this.oLis.length) {
				this.index = 0;
			}
			// 背景图跟随变化
			this.setback()

			// li颜色跟随变化
			this.setcolor()
		}

		// 方法四 点击左边按钮背景图,li颜色跟随变化
		pre() {
			this.index--;
			if (this.index == -1) {
				this.index = this.oLis.length - 1;
			}

			// 背景图跟随变化
			this.setback()

			// li颜色跟随变化
			this.setcolor()


		}

		// 方法五 点击li时背景图与li颜色变化
		clickli() {
			let that = this;
			for (let i = 0; i < this.oLis.length; i++) {
				this.oLis[i].onclick = function() {
					that.index = i;
					that.setback();
					that.setcolor()
				}
			}
		}

		// 方法六 集合所有方法
		clickinput() {
			let that = this;
			this.oNext.onclick = function() {
				that.next();
			}
			this.oPre.onclick = function() {
				that.pre();
			}
			this.clickli()
			this.auto();
			this.onmouseover();
			this.onmouseout();

		}
		onmouseover() {
			let that = this;
			this.oDiv.onmouseover = function() {
				that.oPre.style.display = "block";
				that.oNext.style.display = "block";
			}
		}
		onmouseout() {
			let that = this;
			this.oDiv.onmouseout = function() {
				that.oNext.style.display = "none";
				that.oPre.style.display = "none";
			}
		}
		auto() {
			let that = this;
			let time = 0;
			let flag = true;
			//封装定时器
			function move() {
				clearInterval(time)
				time = setInterval(() => {
					that.next();
				}, 2000);
			}
			//调用定时器
			move();
			//移入时停止定时器
			this.oDiv.onmouseenter = function() {
				clearInterval(time);
				console.log(1);
			}
			//移出时重启定时器
			this.oDiv.onmouseleave = function() {
				move();
				console.log(2);
			}
		}
	}


	let oDiv = document.querySelector("#main-lunbo");
	let oLis = document.querySelectorAll(".banner-item");
	let oInput = document.querySelectorAll("input");
	let a = new Banner(oDiv, oLis, oInput[0], oInput[1]);
	a.clickinput();
</script>
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
